<template>
	<view>
		<view class="map">
			<view class="map-wrap">
				<map
					id="map"
					style="width: 100%; height: 100vh;" 
					:latitude="latitude" 
					:longitude="longitude"
					:markers="covers"
					show-location
					@tap="handleTapMap"
					@regionchange="handleRegionchangeMap"
				>
				</map>
			</view>
			<view class="controls-title">
				
				<view class="input">
					<input 
						type="text" 
						v-model="searchText"
						placeholder="输入地址名称"
						@input="handleSearchAddress(searchText)"
					/>
				</view>
			</view>
			
			<view class="list">
				<view 
					class="item"
					v-for="(item, index) in searchAddressList"
					:key="index"
					@click="handleChooseAddress(item)"
				>
					<view class="tit">{{item.title}}</view>
					<view class="address">{{item.address}}</view>
				</view>
			</view>
			
			<view class="choosed_address-wrap">
				<view class="choosed_address">
					<text class="tip">当前位置：</text>
					{{curChoosedAddress.title || curChoosedAddress.address || '定位中...'}}
				</view>
				<view class="btn" @click="handleConfirmChooseAddress">确定</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	var QQMapWX = require('@/utils/qqmap-wx-jssdk/qqmap-wx-jssdk.min.js');
	var qqmapsdk;
	import $DB from '@/utils/debounce.js'
	export default {
		data() {
			return {
				travelsStatus: '', // to出发地选择 | form目的地选择
				title: 'map',
				latitude: 0,
				longitude: 0,
				searchText: '',
				searchAddressList: [],
				curChoosedAddress: {},
				covers: [{
					id:1,
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: '/static/imgs/icons/from-icon.png',
					width: 18,
					height: 34,
				}]
			}
		},
		onLoad(opt) {
			this.initMap();
			this.getLocation();
			this.travelsStatus = opt && opt.travelsStatus
			if (this.travelsStatus==='to') {
				this.covers[0].iconPath = '/static/imgs/icons/to-icon.png'
			}
		},
		methods: {
			initMap() {
				qqmapsdk = new QQMapWX({
					key: 'C7JBZ-VQD6D-BVZ4C-PHTJO-HNPSF-ORFT5'
				});
			},
			getLocation() {
				let _this = this
				uni.getLocation({
					type: 'gcj02',
					success:async function (res) {
						let {latitude, longitude} = res
						_this.latitude = latitude // 当前位置的纬度
						_this.longitude = longitude // 当前位置的经度
						// #ifdef MP-WEIXIN
						_this.reverseGeocoder(latitude, longitude)
						// #endif
						// #ifdef H5
						let data =await _this.exchangeDingwei(latitude, longitude)
						_this.curChoosedAddress = data.result
						// #endif
						_this.covers[0].latitude = latitude // 当前位置的纬度
						_this.covers[0].longitude = longitude // 当前位置的经度
					}
				});
			},
			reverseGeocoder(latitude, longitude) {
				let _this = this
				qqmapsdk.reverseGeocoder({
					location: {latitude,longitude},
					success: function (res) {
						_this.curChoosedAddress = res.result
					},
				});
			},
			handleSearchAddress: $DB(function(text) {
				let _this = this
				qqmapsdk.search({
					keyword: text,
					success: function (res) {
						_this.searchAddressList = res.data
					},
					fail: function (res) {
						uni.showToast({
							title: '地址搜索失败',
							icon: 'none'
						})
					}
				})
			},250),
			handleChooseAddress(item) {
				this.curChoosedAddress = item
				this.searchText = ''
				this.searchAddressList = []
				this.$set(this.covers[0], 'latitude', item.location.lat)
				this.$set(this.covers[0], 'longitude', item.location.lng)
				this.latitude = item.location.lat
				this.longitude = item.location.lng
			},
			async handleTapMap(e) {
				console.log(e);
				let {latitude, longitude} = e.detail
				// #ifdef MP-WEIXIN
				this.reverseGeocoder(latitude, longitude)
				// #endif
				
				// #ifdef H5
				let data =await this.exchangeDingwei(latitude, longitude)
				this.curChoosedAddress = data.result
				// #endif
			},
			handleRegionchangeMap(e) {
				let _this = this
				let mapCtx = uni.createMapContext("map",this)
				mapCtx.getCenterLocation({
					type: 'gcj02',
					success: async function (res) {
						let {latitude, longitude} = res
						_this.latitude = latitude // 当前位置的纬度
						_this.longitude = longitude // 当前位置的经度
						// #ifdef MP-WEIXIN
						_this.reverseGeocoder(latitude, longitude)
						// #endif
						
						// #ifdef H5
						let data =await _this.exchangeDingwei(latitude, longitude)
						_this.curChoosedAddress = data.result
						// #endif
						_this.covers[0].latitude = latitude // 当前位置的纬度
						_this.covers[0].longitude = longitude // 当前位置的经度
					}
				})
			},
			handleConfirmChooseAddress() {
				this.$store.commit('upPickuperChoosedAddressObj', {[this.travelsStatus]: this.curChoosedAddress})
				uni.navigateBack({delta: 1})
			}
		}
	}
</script>

<style lang="scss" scoped>
.map-wrap {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
}
.controls-title {
	width: 690rpx;
	height: 64rpx;
	margin: 18rpx auto;
	border-radius: 32rpx;
	background-color: #fff;
	display: flex;
	align-items: center;
	.address-wrap {
		font-size: 26rpx;
		display: flex;
		width: 152rpx;
		justify-content: space-evenly;
		color:$blue;
		border-right: 1px solid #ccc;
		.location-icon {
			width: 22rpx;
			height: 28rpx;
		}
	}
	.input {
		flex: 1;
		background: url(@/static/imgs/icons/search-icon.png) no-repeat left 200rpx center;
		background-size: 26rpx 26rpx;
		padding: 0 40rpx;
		margin-left: 30rpx;
		text-align: center;
	}
}
.list {
	display: flex;
	flex-direction: column;
	width: 690rpx;
	margin: 0 auto;
	background-color: #fff;
	border-radius: 12rpx;
	.item {
		display: flex;
		flex-direction: column;
		padding: 20rpx;
		border-bottom: 1px solid #ebebeb;
		.tit {
			font-size: 32rpx;
		}
		.address {
			font-size: 26rpx;
			color: #999;
		}
	}
}
.choosed_address-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 30rpx;
	// height: 98rpx;
	background-color: #fff;
	.choosed_address {
		font-size: 28rpx;
		flex: 1;
		padding-right: 20rpx;
		.tip {
			color:$yellow;
		}
	}
	.btn {
		font-size:32rpx;
		color: #fff;
		width:100rpx;
		text-align: center;
		height:72rpx;
		line-height: 72rpx;
		background:$yellow;
		border-radius:12rpx;
	}
}
</style>
